import React from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWarpper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
} from './style';
import { actionCreators } from './store';

class Header extends React.Component {
  showSearchInfo = (show) => {
    const { list, page, totalPage, handleChange, handleMouseEnter, handleMouseLeave, mouseIn } = this.props;
    const pageList = [];
    if (list.size) {
      const jsList = list.toJS();
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        if (jsList[i]) {
          pageList.push(jsList[i]);
        }
      }
    }
    console.log(mouseIn);
    if (show || mouseIn) {
      return (
        <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handleChange(page, totalPage, this.spinIcon)}>
              <span className="iconfont spin">&#xe851;</span>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            {pageList.map((val, index) => {
              return <SearchInfoItem key={index}>{val}</SearchInfoItem>;
            })}
          </div>
        </SearchInfo>
      );
    } else if (!show && !mouseIn) {
      return null;
    }
  };
  render() {
    return (
      <HeaderWrapper>
        <Logo href="/ " />
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          <NavItem className="right">
            <span className="iconfont">&#xe636;</span>
          </NavItem>
          <NavItem className="right">{this.props.login ? '退出' : '登录'}</NavItem>
          <SearchWarpper>
            <CSSTransition in={this.props.focused} timeout={200} classNames="slide">
              <NavSearch
                className={this.props.focused ? 'focused' : ''}
                onFocus={() => this.props.handleInputFocus(this.props.list)}
                onBlur={this.props.handleInputBlur}
              ></NavSearch>
            </CSSTransition>
            <span className={this.props.focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe6e4;</span>
            {this.showSearchInfo(this.props.focused)}
          </SearchWarpper>
        </Nav>
        <Addition>
          <Button className="writing">
            <span className="iconfont">&#xe6eb;</span>
            写文章
          </Button>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.get('header').get('focused'),
    list: state.get('header').get('list'),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login: state.getIn(['login', 'login']),
  };
};
const mapDispathToProps = (dispatch) => {
  return {
    handleInputFocus(list) {
      if (!list.size) {
        dispatch(actionCreators.getList());
      }
      dispatch(actionCreators.searchFocus());
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur());
    },
    handleChange(page, totalPage, spin) {
      if (page === totalPage) {
        dispatch(actionCreators.handleChange(1));
      } else {
        dispatch(actionCreators.handleChange(page + 1));
      }
    },
    handleMouseLeave() {
      dispatch(actionCreators.handleMouseLeave());
    },
    handleMouseEnter() {
      dispatch(actionCreators.handleMouseEnter());
    },
  };
};

export default connect(mapStateToProps, mapDispathToProps)(Header);
